<template>
	<view class="login-content">
		<view class="container">
			<view class="top-text"><text>Welcome</text></view>
			<!--登录信息-->
			<view class="login-form">
				<uni-forms :modelValue="formData" ref="ruleFormRef" :rules="rules">
					<uni-forms-item name="emailOrPhone">
						<input class="login-input" type="text" v-model="formData.emailOrPhone" placeholder="邮箱/手机号" />
					</uni-forms-item>
					<uni-forms-item name="password">
						<input class="login-input" password type="text" v-model="formData.password" placeholder="密码" />
					</uni-forms-item>
				</uni-forms>
				<view class="login-button">
					<button class="login" @tap="submitForm">登录</button>
					<button class="register" @click="registerForm">去注册</button>
				</view>
				<!--底部信息-->
				<view class="login-bottom">
					<view class="radio-conrainer"><radio color="#fff" iconColor="#007AFF" class="radio" value="r1" checked="true" /><text>记住密码</text></view>
					<view><text>忘记密码？</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { getAllContacts } from '../../api/contacts';
import { useUserInfoStore } from '../../store/user';
import { initWs, addWsListener } from '../../ws/wsClient';
import { setStorageUserId, setStorageToken } from '../../plus/store/UserData'
import { addUserSetting } from '../../db/UserSettingModel';

const userStore = useUserInfoStore()
const formData = ref({
	emailOrPhone: "13547428356",
	password: "123"
})

//登录
const submitForm = () => {
	if(!ruleFormRef.value) return;
	ruleFormRef.value.validate().then(async(res) => {
		//登录
		let result = await getAllContacts(formData.value)
		if(result && result.code == 0){
			console.log("登录成功", result.result)
			let token = result.result.token
			if(token){
				console.log("储存token", token)
				uni.setStorageSync("token", token)
				userStore.setAuth(true)
				userStore.setUser(result.result)
				//将信息储存到手机中
				setStorageUserId(result.result.userId)
				setStorageToken(token)
			}
			//增加用户配置
			addUserSetting(result.result.userId, result.result.email)
			//建立ws连接
			initWs({
				email: result.result.email,
				token: token,
				userId: result.result.userId,
				nickName: result.result.nickName,
				admin: result.result.admin,
			})
			console.log("开始跳转页面")
			//接收消息并跳转页面
			onReciveMessage()
		}
		console.log("得到数据", result)
	}).catch(err => {
		console.error("表单错误数据信息：", err)
	})
}

//注册
const registerForm = () => {
	//跳转注册页面
	uni.redirectTo({
		url: '/pages/login/register'
	})
}
//校验
const ruleFormRef = ref(null)
const rules = reactive({
    emailOrPhone: {
		rules: [{
			required: true,
			errorMessage: '请输入邮箱或手机号'
		}]
	},
    password: {
		rules:[{
			required: true,
			errorMessage: '请输入密码'
		}]
	}
})
//接收消息
const onReciveMessage = () => {
	addWsListener('reciveMessage', (data) => {
		console.log("得到消息",data)
		uni.switchTab({
			url: `/pages/index/index?messageType=${data.messageType}`
		})
	})
}
</script>

<style lang="scss" scoped>
.login-content{
	height: 100%;
	width: 100%;
	background-image: url("../../static/login/login.jpg");
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
	.container{
		height: 60%;
		width: 80%;
		margin-top: 20rpx;
		.top-text{
			width: 100%;
			display: flex;
			justify-content: center;
			text{
				color: #fff;
				font-size: 90rpx;
				font-family: Georgia, serif;
			}
		}
		.login-form{
			margin-top: 80rpx;
			.login-input{
				border: 2px solid white;
				height: 90rpx;
				font-size: 30rpx;
				border-radius: 100rpx;
				text-align: center;
				color: #fff;
			}
			.login-button{
				display: flex;
				.login{
					width: 50%;
					border-radius: 100rpx;
					background-color: rgba(#94a6ad,0.5);
					backdrop-filter: blur(4px);
					color: #fff;
					height: 90rpx;
					line-height: 90rpx;
					font-weight: bold;
					margin-right: 5rpx;
				}
				.register{
					width: 50%;
					color: #fff;
					border-radius: 100rpx;
					background-color: rgba(#94a6ad,0.5);
					backdrop-filter: blur(4px);
					height: 90rpx;
					line-height: 90rpx;
					font-weight: bold;
					margin-left: 5rpx;
				}
			}
			.login-bottom{
				font-size: 21rpx;
				color: #fff;
				margin-top: 20rpx;
				font-weight: bold;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 10rpx 0 10rpx;
				.radio-conrainer{
					display: flex;
					align-items: center;
					
				}
			}
		}
	}
}
</style>
